/* 图片容器 */
.img-box {
  margin: 1rem;
  width: 15rem;
}

/* 图片自适应 */
.img-box img {
  display: block;
  width: 100%;
  height: auto;
}

/* 滤镜 */
.filter1 {
  /* 
  filter就是滤镜
  blur是模糊（虚化）
  值越大越模糊
  */
  filter: blur(2px);
}

.filter2 {
  /*
  brightness：亮度
  值越大越亮 
  */
  filter: brightness(0.7);
}

.filter3 {
  /* 
opacity:不透明度
0-1，0是全透，1是完全不透
  */
  filter: opacity(0.5);
}

.filter4 {
  /* 
  颜色反转 
  */
  filter: invert(75%);
}

.filter5 {
  /* 
  灰度
  0-1，0就是没有效果
  1：是黑白
  */
  filter: grayscale(1);
}

.filter6 {
  /* 
  描边阴影，png透明图效果更佳
  是会沿着图片或者是内容边距显示阴影（发光）
  参数1：x轴距离，参数2：y轴距离，参数3：z轴距离（发光）
  参数4：颜色，一般来说阴影和发光不会同时设置
  */
  filter: drop-shadow(0px 0px 1rem #ff00ff);
}

.clip-box {
  margin: 1rem;
  width: 10rem;
  height: 10rem;
  background-color: #ff0000;
}

.clip1 {
  /* 圆形切片 */
  clip-path: circle(50%);
}

.clip2 {
  /* 
  多边形切片 polygon类似于ps的钢笔工具
  是一系列的点构成一个多边形，每个点直接用逗号分隔
  每个点由xy轴坐标定义
  */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.clip3 {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
